<template>
  <div>
    <pageTools :show-before="true">
      <template #before>
        <el-button type="primary" @click="isShowDialog=true">添加客户</el-button>
      </template>

      <template #after>
        <el-select v-model="brokerName" placeholder="全部经纪人">
          <el-option v-for="item in brokerList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-input v-model="name_contains" @input="inputSearch" />
        <el-button @click="search">筛选</el-button>
      </template>

      <template #content>
        <div class="hr">
          <hr>
        </div>
        <el-table border :data="clinetList">
          <el-table-column label="图片">
            <template v-slot="{row}">
              <el-image :src="row.image" />
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="电话" prop="phone" />
          <el-table-column label="经纪" prop="agent.name" />
          <el-table-column label="微信" prop="wechat" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="editChilent(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delClient(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </pageTools>

    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="pageConfig._limit"
        :total="total"
        :current-page="page"
        @current-change="currentChange"
      />
    </el-row>

    <el-dialog :visible="isShowDialog" :title="formData.id? '编辑客户':'添加客户'" @close="btnCancel">
      <el-form ref="addForm" label-width="80px" :model="formData" :rules="rules">
        <el-form-item label="经纪人">
          <el-select v-model="formData.agent">
            <el-option v-for="item in brokerList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="formData.email" />
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="formData.phone" />
        </el-form-item>

        <el-form-item label="微信">
          <el-input v-model="formData.wechat" />
        </el-form-item>

        <el-form-item label="描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>

        <el-form-item label="封面">
          <updateImage ref="updateImg" />
        </el-form-item>
      </el-form>

      <el-row type="flex" justify="center">
        <el-button type="primary" @click="btnOk">确定</el-button>
        <el-button @click="btnCancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getClientList, getBroker, getClientTotal, addClient, delClient, getChilentById, editClient } from '@/api/clientManage'
import updateImage from '@/components/updateImage'
export default {
  components: {
    updateImage
  },
  data() {
    return {
      clinetList: [],
      brokerList: [],
      brokerName: '',
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      page: 0,
      total: 0,
      isShowDialog: false,
      name_contains: '',
      formData: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      rules: {
        name:
            [
              { required: true, message: '名字不能为空', trigger: 'blur' }
            ],
        desc:
            [
              { required: true, message: '描述不能为空', trigger: 'blur' }
            ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    inputSearch() {
      if (this.brokerName === '' && this.name_contains === '') {
        this.getList()
      } else {
        this.search()
      }
    },
    async getList() {
      // 获取客户列表
      const res = await getClientList(this.pageConfig)
      this.clinetList = res.data

      // 获取经纪人列表
      const brokerRes = await getBroker()
      this.brokerList = brokerRes

      // 获取客户数量
      const total = await getClientTotal()
      this.total = total.data
    },
    // 到当前点击的页数
    currentChange(page) {
      // 先计算上一页的页数
      const pageLast = page - 1
      const size = pageLast * this.pageConfig._limit
      this.pageConfig._start = size
      this.getList()
    },
    async btnOk() {
      // 新增
      await this.$refs.addForm.validate()
      this.formData.image = this.$refs.updateImg.fileList[0].url ? this.$refs.updateImg.fileList[0].url : ''
      if (this.formData.id) {
        await editClient(this.formData)
        this.$message.success('修改成功 ')
      } else {
        await addClient(this.formData)
        this.total++
        const page = this.total / 2 - 1
        this.page = page + 1
        const size = page * this.pageConfig._limit + 1
        this.pageConfig._start = size
        this.$message.success('新增成功')
      }
      this.getList()
      this.isShowDialog = false
    },
    btnCancel() {
      this.$refs.addForm.resetFields()
      this.formData = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      }
      this.isShowDialog = false
      this.$refs.updateImg.fileList = []
    },
    // 删除
    async delClient(id) {
      await this.$confirm('你确定要删除吗？')
      await delClient(id)
      if (this.clinetList.length === 1) {
        this.page--
        this.pageConfig._start = this.page * this.pageConfig._limit - this.pageConfig._limit
        console.log(this.pageConfig._start)
      }
      this.getList()
      this.$message.success('删除成功')
    },
    // 修改
    async editChilent(id) {
      this.isShowDialog = true
      const res = await getChilentById(id)
      this.formData = res.data
      this.formData.agent = res.data.agent.name
      res.data.image ? this.$refs.updateImg.fileList = [{ url: res.image }] : ''
    },
    // 筛选
    async search() {
      this.pageConfig._start = 0
      // 模糊查询
      const res = await getClientList({ _start: this.pageConfig._start, name_contains: this.name_contains })
      this.clinetList = res.data
      // 页数处理
      this.total = await getClientTotal({ name_contains: this.name_contains })
      if (this.brokerName !== '' && this.name_contains !== '') {
        // 精准查询
        const data = await getClientList({ _start: this.pageConfig._start, name_contains: this.name_contains, agent: this.brokerName })
        this.clinetList = data
        this.total = await getClientTotal({ name_contains: this.name_contains, agent: this.brokerName })
      } else if (this.brokerName !== '' && this.name_contains === '') {
        const data = await getClientList({ _start: this.pageConfig._start, agent: this.brokerName })
        this.clinetList = data
        this.total = await getClientTotal({ agent: this.brokerName })
        console.log(this.total)
      }
    }
  }
}
</script>

<style>
.hr {
    padding-top: 20px;
    padding-bottom: 20px;
  }
</style>
